<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue';
import dayjs from 'dayjs';
import { navigateTo } from '@tarojs/taro';
import { Tips as AppNutIconTips, Eye as AppNutIconEye } from '@nutui/icons-vue-taro';
import { getSysImgUrl } from '/@/utils/index';
import { MESSAGE_INFORMATION_QUERY } from '/@/api/modules/base/message-information';

const props = withDefaults(
  defineProps<{
    /**
     * 是否刷新
     */
    refresh: boolean;
  }>(),
  {
    theme: 'default',
    refresh: false,
  },
);

const emits = defineEmits<{
  (e: 'refresh'): void;
}>();

const state = reactive<{
  list: MessageInformation.Dto[];
}>({
  list: [],
});

function queryList() {
  MESSAGE_INFORMATION_QUERY({
    comQuery: {
      page: 1,
      pageCount: 3,
    },
    dto: { publishStatus: 2 },
  }).then((res) => {
    state.list = res.dto?.slice(0, 3) || [];
    emits('refresh');
  });
}

onMounted(() => {
  queryList();
});

watch(props, (newProps) => {
  if (newProps.refresh) {
    queryList();
  }
});
</script>

<template>
  <view class="home-message-information">
    <view class="home-message-information__header">
      <view class="home-message-information__title">最新资讯</view>
      <view
        @click="
          navigateTo({
            url: `/pages/information/list/index`,
          })
        "
        >更多></view
      >
    </view>
    <view class="home-message-information__wrapper">
      <view
        class="information-item"
        v-for="item in state.list"
        @click="
          navigateTo({
            url: `/pages/information/detail/index?id=${item.id}`,
          })
        "
      >
        <view class="information-item__image-wrapper">
          <image
            v-if="item.coverUrl"
            :src="getSysImgUrl(item.coverUrl)"
            class="information-item__image"
            mode="aspectFill"
          />
          <app-nut-icon-tips v-else />
        </view>
        <view class="information-item__right">
          <view class="information-item__title"
            ><text numberOfLines="2">{{ item.title }}</text></view
          >
          <view class="information-item__footer">
            <text class="information-item__footer--left">
              {{ dayjs(Number(item.createTime)).format('YYYY-MM-DD') || '_' }}
            </text>
            <view class="information-item__footer--right">
              <app-nut-icon-eye size="10" />&nbsp;&nbsp;<text>{{ item.readCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!state.list.length" class="app-page__list-tips">
      <text>暂无数据！</text>
      <!-- <text v-else-if="state.list.length">加载完成!</text> -->
    </view>
  </view>
</template>

<style lang="scss">
.home-message-information {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 15px 20px;

  &__header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
    font-size: 25px;
    color: #666;
  }

  &__title {
    flex: 1;
    font-size: 35px;
    font-weight: bold;
    color: #000;
  }

  .information-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 0;
    font-size: 24px;
    color: #666;
    overflow: hidden;
    display: flex;
    align-items: center;

    &__image-wrapper {
      width: 20%;
      height: 100px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    &__image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    &__right {
      flex: 1;
      margin-left: 20px;
    }

    &__title {
      color: #000;
      font-size: 27.5px;
      font-weight: bold;
      line-height: 35px;
      height: 70px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &__footer {
      display: flex;
      align-items: center;
      font-size: 20px;
      line-height: 30px;

      &--left {
        flex: 1;
      }
      &--right {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
